<!--  -->
<template>
  <div class="timeSelectBox">
    <div class="timeMoudle">
      <div
        class="mr10"
        v-for="(item, index) in bdTimeData"
        :key="index"
        @click="handleBdTime(index, item.value)"
        :class="{timeStyle: bdTimeIndex == index}"
      ><span v-if="index">{{item.title}}</span></div>
      <div class="timeBox">
        <span class="startTime">{{startTime}}</span>
        <span class="line">—</span>
        <span class="endTime">{{endTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import formatDate from "../utils/commonFun";
export default {
  components: {},
  data() {
    return {
      bdTimeIndex: 1,
      bdScopeTime: "month",
      bdTimeData: [
        { title: "本日", value: "day" },
        { title: "本周", value: "week" },
        { title: "本月", value: "month" }
      ],
      insuranceChart: null,
      insuranceOption: {},
      insuranceDataCount: [],
      inquiryDataCount: [],
      payDataCount: [],
      dataLineX: [],
      startTime: "",
      endTime: ""
      // ...dateUtil.getWeek()
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    handleBdTime(index, value) {
      if (index === 0) {
        this.bdTimeIndex = 0;
        this.startTime = formatDate.formatDate(new Date());
        this.endTime = formatDate.formatDate(new Date());
      }
      if (index === 1) {
        this.bdTimeIndex = 1;
        this.startTime = formatDate.getWeek()[0];
        this.endTime = formatDate.getWeek()[1];
      }
      if (index === 2) {
        this.bdTimeIndex = 2;
        this.startTime = formatDate.getMonth()[0];
        this.endTime = formatDate.getMonth()[1];
      }
      // console.log(index, value, this.bdTimeIndex)
      this.$emit("getTimeIndex", this.bdTimeIndex);
      this.bdTimeIndex = index;
      this.bdScopeTime = value;
      this.getlineChartDataFun(this.bdScopeTime);
    },
    getlineChartDataFun() {},
    // 初始默认选择周
    initDate() {
      this.startTime = formatDate.getWeek()[0];
      this.endTime = formatDate.getWeek()[1];
    }
  },
  created() {
    this.initDate();
  }
};
</script>
<style lang="less" scoped>
.timeStyle {
  color: #fff;
}
.timeMoudle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  .mr10 {
    margin-right: 10px;
    cursor: pointer;
  }
}
.timeBox {
  width: 300px;
  height: 30px;
  color: #fff;
  border: 1px solid #3152f7;
  border-radius: 4px;
  background: rgba(49, 82, 247, 0.2);
  padding: 0 16px;
  line-height: 28px;

  .line {
    margin-left: 20px;
    margin-right: 20px;
  }
}
</style>
